<template>
  <div id="personalDetail">
    <div class="every_one">
      <span class="icon icon_left"></span>
      <span class="title">
        <!--实名认证之后姓名和出生日期不让修改-->
        <span>姓名</span>
        <!--:error-message="usernameErrorMsg"-->
        <van-field
          class="name_input"
          v-model="fnlist.real_name"
          @input="usernameInput"
          input-align="right"
          placeholder="请输入您的姓名"
          :disabled="fnlist.auth_status == 1"
          clearable
        />
      </span>
    </div>
    <div class="every_one">
      <span class="icon icon_left" @click="showPopup"></span>
      <span class="title">
        <span>性别</span>
        <van-action-sheet
          :show="showPhone"
          :actions="initdata.init_id_sex"
          :round="false"
          @close="onClose"
          @select="onSelect"
        />
        <span class="name_input aaa" @click="showPopup">
          <personalDetail :according="fnlist.sex" :arrlist="initdata.init_id_sex" />
        </span>
      </span>
      <span class="icon" @click="showPopup">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one">
      <span class="icon icon_left"></span>
      <span class="title">
        <span>出生日期</span>
        <van-field
          class="name_input can_name"
          v-model="fnlist.birthday"
          @input="onInput"
          input-align="right"
          :disabled="fnlist.auth_status == 1"
          placeholder="请输入您的出生日期"
          clearable
        />
      </span>
    </div>
    <div class="every_one one">
      <span class="icon icon_left"></span>
      <span class="title">
        <span>手机号</span>
        <van-field
          class="name_input p_phone"
          v-model="fnlist.mobile"
          input-align="right"
          placeholder="请输入您的手机号"
          clearable
          disabled="true"
        />
      </span>
    </div>
    <div class="every_one one">
      <span class="icon icon_left"></span>
      <span class="title">
        <span>学历</span>
        <van-action-sheet :show="showE" :round="false">
          <van-picker
            :columns="initdata.init_id_education"
            show-toolbar
            value-key="name"
            :default-index="fnlist.education-1"
            @confirm="onSelectE"
            @cancel="onClose"
          />
        </van-action-sheet>
        <!-- fnlist.education -->
        <span class="name_input aaa" @click="showPopupE">
          <personalDetail :according="fnlist.education" :arrlist="initdata.init_id_education" />
        </span>
      </span>
      <span class="icon" @click="showPopupE">
        <van-icon name="arrow" class="r" />
      </span>
    </div>

    <div class="every_one">
      <span class="icon icon_left"></span>
      <span class="title">
        <span>行业</span>
        <van-action-sheet :show="showIndustry" :round="false">
          <van-picker
            :columns="initdata.init_id_industry"
            show-toolbar
            value-key="name"
            :default-index="fnlist.industry-1"
            @confirm="onSelectIndustry"
            @cancel="onClose"
          />
        </van-action-sheet>
        <span class="name_input aaa" @click="showPopupIndustry">
          <personalDetail :according="fnlist.industry" :arrlist="initdata.init_id_industry" />
        </span>
      </span>
      <span class="icon" @click="showPopupIndustry">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one">
      <span class="icon icon_left"></span>
      <span class="title">
        <span>职业</span>
        <van-action-sheet :show="showpation" :round="false">
          <van-picker
            :columns="initdata.init_id_occp"
            show-toolbar
            value-key="name"
            @confirm="onSelectupation"
            @cancel="onClose"
          />
        </van-action-sheet>
        <span class="name_input aaa" @click="showoccupation">
          <personalDetail :according="fnlist.occupation_code" :arrlist="initdata.init_id_occp" />
        </span>
      </span>
      <span class="icon" @click="showoccupation">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one">
      <span class="icon icon_left"></span>
      <span class="title">
        <span>收入</span>
        <van-action-sheet :show="showIncome" :round="false">
          <van-picker
            :columns="initdata.init_id_income"
            show-toolbar
            value-key="name"
            :default-index="fnlist.income-1"
            @confirm="onSelectIncome"
            @cancel="onClose"
          />
        </van-action-sheet>
        <span class="name_input aaa" @click="showPopupIncome">
          <personalDetail :according="fnlist.income" :arrlist="initdata.init_id_income" />
        </span>
      </span>
      <span class="icon" @click="showPopupIncome">
        <van-icon name="arrow" class="r" />
      </span>
    </div>

    <div class="every_one">
      <span class="icon icon_left"></span>
      <span class="title">
        <span>公司名称</span>
        <van-field
          class="name_input can_name"
          v-model="fnlist.company"
          maxlength="20"
          @input="companyInput"
          input-align="right"
          placeholder="请输入您的公司名称"
          clearable
        />
      </span>
      <!--<span class="icon"><van-icon name="arrow" class="r"/></span> -->
    </div>

    <div class="every_one one">
      <span class="icon icon_left"></span>
      <span class="title">
        <span>婚姻</span>
        <van-action-sheet
          value-key="name"
          :default-index="fnlist.marriage-1"
          :show="showMarriage"
          :actions="initdata.init_id_marriage"
          :round="false"
          @close="onClose"
          @select="onSelectMarriage"
        />
        <span class="name_input aaa" @click="showPopupMarriage">
          <personalDetail :according="fnlist.marriage" :arrlist="initdata.init_id_marriage" />
        </span>
      </span>
      <span class="icon" @click="showPopupMarriage">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one">
      <span class="icon icon_left">
        <span class="p">*</span>
      </span>
      <span class="title">
        <span>所在地</span>
        <van-action-sheet :show="showLP" :round="false">
          <van-area
            :area-list="areaList"
            @confirm="selectArea"
            columns-num="2"
            @cancel="showLP = false"
          />
        </van-action-sheet>
        <span
          class="name_input d"
          @click="showL"
        >{{fnlist.province_string == null?'':fnlist.province_string}} {{fnlist.city_string == null?'':fnlist.city_string}}</span>
      </span>
      <span class="icon" @click="showL">
        <van-icon name="arrow" class="r" />
      </span>
    </div>
    <div class="every_one">
      <span class="icon icon_left">
        <span class="p">*</span>
      </span>
      <span class="title">
        <span>家庭住址</span>
        <!--:error-message="usernameErrorMsg"-->
        <van-field
          class="name_input can_name"
          v-model="fnlist.address"
          maxlength="100"
          @input="addressInput"
          input-align="right"
          placeholder="请输入您的家庭住址"
          clearable
        />
      </span>
    </div>
    <div class="receive_btn">
      <van-button
        color="linear-gradient(to right, #2eb3fb, #195bfc)"
        @click="infoSub()"
        block
        round
        class="receiver"
      >提交</van-button>
    </div>
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import getUserInfo from "../../utils/getUserInfo";
import { get } from "../../utils/request";
import { setStorage, getStorage } from "../../utils/storage";
import areaList from "../../utils/area";
import Toast from "@/../static/vant/toast/toast";
import personalDetail from "../../common/components/personalDetail";
// 开发者的appId和密钥，密钥动态生成
const appId = "";
//  const appId = 'wx50d4acb21d3ab753'
const appKey = "";

export default {
  components: {
    personalDetail
  },
  data() {
    return {
      index: 0, // 职业初始化
      userInfo: {},
      isLogin: false,
      openid: "",
      area: "",
      occupation: "",
      address: "",
      showPhone: false,
      showE: false,
      showLP: false,
      showIndustry: false,
      showIncome: false,
      showMarriage: false,
      showBirth: false,
      showpation: false,
      selectDate: "1988.06.03",
      currentDate: new Date().getTime(),
      minDate: new Date().getTime(),
      maxDate: new Date().getTime(),
      areaList: areaList,
      // 列表传值
      fnlist: {},
      // 初始化
      initdata: {}
    };
  },
  computed: {},
  onShow() {
    this.getMaxDate(); //  最小是18周岁
    // 初始化
    this.initdata = wx.getStorageSync("initData");
    this.fnInitialize();
    this.initdata.init_id_industry = [];
    this.initdata.init_id_occp = [];
    this.getIndustryList();
    // console.log(this.initdata)
  },
  methods: {
    //  获取用户信息
    fnInitialize() {
      this.$http
        .post({
          url: "/mobile/api/userinfo",
          data: {
            customer_id: wx.getStorageSync("userInfo").customer_id
          }
        })
        .then(res => {
          this.fnlist = res.data;
          if (this.fnlist.industry) {
            this.getOccupationList(this.fnlist.industry);
            this.fnlist.occupation_code &&
              (this.fnlist.occupation_code = Number(
                this.fnlist.occupation_code
              )); // 职业code转数字
          }
        });
    },
    getMaxDate() {
      let curDate = new Date().getTime();
      let one = 9 * 365 * 24 * 3600 * 1000;
      let oneYear = curDate - one;
      this.maxDate = new Date(oneYear).getTime();
      this.selectDate = this.changeTime(this.maxDate).slice(0, 10);
    },
    //  提交信息
    infoSub() {
      if (this.fnlist.province_string == "" || this.fnlist.address == "") {
        Toast("所在地和家庭地址不能为空");
        return;
      }
      this.customer_id = wx.getStorageSync("userInfo").customer_id;
      this.$http
        .post({
          url: "/mobile/api/edituserinfo",
          data: this.fnlist
        })
        .then(res => {
          if (res.code == "RX0000") {
            Toast("提交成功");
            wx.navigateBack({
              delta: 1 // 返回上一级页面。
            });
          } else {
            wx.showToast({
              title: res.msg
            });
          }
        });
    },
    getIndustryList() {
      this.$http
        .post({
          url: "/mobile/api/code/getIndustryList"
        })
        .then(res => {
          console.log(res);
          if (res.code == "RX0000") {
            this.initdata.init_id_industry = res.data.filter(ele => {
              return (ele.id = Number(ele.code));
            });
          } else {
            wx.showToast({
              title: res.msg
            });
          }
        });
    },
    getOccupationList(val) {
      this.$http
        .post({
          url: "/mobile/api/code/getOccupationList",
          data: { parentCode: val }
        })
        .then(res => {
          if (res.code == "RX0000") {
            // this.fnlist.occupation_code = '';
            this.initdata.init_id_occp = res.data.filter(ele => {
              return (ele.id = Number(ele.code));
            });
            console.log(this.initdata.init_id_occp);
            this.fnlist.occupation_code &&
              (this.fnlist.occupation_code = Number(
                this.fnlist.occupation_code
              ));
          } else {
            wx.showToast({
              title: res.msg
            });
          }
        });
    },
    showoccupation() {
      // 职业
      this.showpation = true;
    },
    showPopup() {
      this.showPhone = true;
    },
    showPopupIndustry() {
      // 行业
      this.showIndustry = true;
    },
    showPopupMarriage() {
      this.showMarriage = true;
    },
    showPopupIncome() {
      this.showIncome = true;
    },
    showL() {
      this.showLP = true;
    },
    showPopupBirth() {
      this.showBirth = true;
    },
    selectArea(event) {
      // 所在地
      this.fnlist.province = event.mp.detail.values[0].code;
      this.fnlist.city = event.mp.detail.values[1].code;
      this.fnlist.province_string = event.mp.detail.values[0].name;
      this.fnlist.city_string = event.mp.detail.values[1].name;
      let carmodel = "";
      this.showLP = false;
    },
    showPopupE() {
      // 学历
      this.showE = true;
    },
    cancel() {
      this.showBirth = false;
    },

    confirm(event) {
      this.selectDate = this.changeTime(event.mp.detail).slice(0, 10);
      this.showBirth = false;
    },
    // 毫秒转换成 日期时间 格式“yyyy-MM-dd HH:MM:SS”
    changeTime(time) {
      if (time) {
        var oDate = new Date(time),
          oYear = oDate.getFullYear(),
          oMonth = oDate.getMonth() + 1,
          oDay = oDate.getDate(),
          oHour = oDate.getHours(),
          oMin = oDate.getMinutes(),
          oSen = oDate.getSeconds(),
          oTime =
            oYear +
            "-" +
            this.getBz(oMonth) +
            "-" +
            this.getBz(oDay) +
            " " +
            this.getBz(oHour) +
            ":" +
            this.getBz(oMin) +
            ":" +
            this.getBz(oSen); //拼接时间
        return oTime;
      } else {
        return "";
      }
    },
    //补0
    getBz(num) {
      if (parseInt(num) < 10) {
        num = "0" + num;
      }
      return num;
    },
    onInput(event) {
      // 出生日期
      this.fnlist.birthday = event.mp.detail;
    },
    onSelect(event) {
      // 性别
      this.fnlist.sex = event.mp.detail.id;
    },
    onSelectE(event) {
      this.fnlist.education = event.mp.detail.value.id; // 展示学历相对应的id 传给后端
      this.showE = false;
    },
    onSelectIndustry(event) {
      // 行业
      this.fnlist.industry = event.mp.detail.value.id;
      this.showIndustry = false;
      this.getOccupationList(event.mp.detail.value.code);
      this.fnlist.occupation_code = null;
    },
    onClose() {
      this.showE = false;
      this.showPhone = false;
      this.showLP = false;
      this.showIndustry = false;
      this.showIncome = false;
      this.showMarriage = false;
      this.showBirth = false;
      this.showpation = false;
    },
    onSelectupation(event) {
      // 职业
      this.index = event.mp.detail.index;
      this.showpation = false;
      this.fnlist.occupation_code = event.mp.detail.value.id;
    },
    onSelectIncome(event) {
      // 收入
      this.fnlist.income = event.mp.detail.value.id;
      this.showIncome = false;
    },
    onSelectMarriage(event) {
      // 婚姻
      this.fnlist.marriage = event.mp.detail.id;
    },
    usernameInput(e) {
      // 姓名
      this.fnlist.real_name = e.mp.detail;
    },
    addressInput(e) {
      // 家庭住址
      this.fnlist.address = e.mp.detail;
    },
    companyInput(e) {
      // 公司名称
      this.fnlist.company = e.mp.detail;
    },
    async handleGetUserInfo() {
      let result = await getUserInfo();
      this.userInfo = result.userInfo;
      // 通过openId将对应的用户信息缓存到本地
      let openid = await getStorage("openid");
      setStorage(openid, this.userInfo);
    },
    async getCollections() {
      let openId = await getStorage("openid");
      let userInfo = await getStorage(openId);

      // 判断用户是否授权登录
      if (!userInfo) {
        // 如果没有登录提示用户登录
        wx.showToast({
          title: "请先登录",
          icon: "none"
        });
      } else {
        // 登录以后发送请求获取对应收藏的文章列表，跳转页面
        // 获取用户收藏的文章
        let collectionsResult = await get("/getCollections", {
          userOpenId: openId
        });
        wx.navigateTo({
          url:
            "/pages/bookList/main?booksList=" +
            JSON.stringify(collectionsResult)
        });
      }
    },
    toScan() {
      wx.navigateTo({
        url: "/pages/scan/main"
      });
    }
  }
};
</script>
<style lang="less">
#personalDetail {
  background: #f9f9f9;
  height: 100vh;
  .van-cell::after {
    position: absolute;
    box-sizing: border-box;
    -webkit-transform-origin: center;
    transform-origin: center;
    content: " ";
    pointer-events: none;
    top: auto;
    right: 0;
    bottom: 0;
    left: 16px;
    border-bottom: 0px solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .van-cell {
    position: relative;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0px 0px 0 16px;
    font-size: 14px;
    font-size: var(--cell-font-size, 14px);
    line-height: 24px;
    line-height: var(--cell-line-height, 24px);
    color: #323233;
    color: var(--cell-text-color, #323233);
    background-color: #fff;
    background-color: var(--cell-background-color, #fff);
  }
  .every_one {
    width: 100%;
    margin-top: 1px;
    height: 40px;
    background: #fff;
    padding: 0 35px 0 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
    &.one {
      margin-top: 10px;
    }
    & > span {
      display: inline-block;
    }
    .icon {
      display: flex;
      align-items: center;
      color: #999999;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      &.icon_left {
        width: 25px;
        position: absolute;
        left: 6px;
      }
      & > .p {
        color: #db4a37;
      }
    }
    .title {
      flex: 1;
      font-size: 14px;
      display: flex;
      & > span {
        display: inline-block;
      }
      .name_input {
        width: 100%;
        flex: 1;
        text-align: right;
        color: #999;
        &.aaa {
          box-sizing: border-box;
        }
        &.time_cs {
          width: 233px;
          text-align: right;
          color: #999;
        }
        &.can_name {
          width: 235px;
          text-align: right;
          color: #999;
        }
        &.d {
          width: 248px;
          text-align: right;
          color: #999;
        }
        &.p_phone {
          width: 249px;
          text-align: right;
          color: #999;
        }
      }
    }
  }
  .receive_btn {
    margin-top: 10px;
    padding: 10px 0;
    background: #fff;
    .receiver {
      .van-button--round {
        height: 36px;
        width: 64%;
      }
    }
  }
}
</style>

